<template>
	<div >
		  <el-dialog title="QQ号登录" :visible.sync="isok.value" width="444px" height="527px" center  top="40px">
			  <div class="register">
				<div class="registerCenter">
					<el-form :model="form" class="regCenter-quick" v-if="isType">
					<p class="quickLogin">快捷登录</p>
					<p class="remarks">使用 <a class="link-tips">QQ手机版</a> 扫码登录，或点击头像授权登录。</p>
					<div class="QQimg">
					<img src="../../public/img/ewm.png" alt="" class="img1">
					<img src="../../public/img/aMin.png" alt="" class="img2">
					</div>
				</el-form> 

			<el-form :model="form" class="regCenter-password" v-if="isReg">
					<div class="login-tips">
						<p class="passwordLogin">密码登录</p>
						<p class="remarks">推荐使用<span @click="toinitial">快捷登录</span>，防止盗号。</p>
					</div>
					<el-form-item >
						<el-input v-model="form.username" autocomplete="off" class="username" placeholder="支持QQ号/邮箱/手机登录" font-size="10px"></el-input>
					</el-form-item>
					<el-form-item  >
						<el-input v-model="form.password" autocomplete="off" class="password" placeholder="请输入密码" font-size="10px"></el-input>
					</el-form-item>
					<el-button type="primary" @click="onSubmit" class="btn">{{logType.title}}</el-button>
   	   		</el-form>

			<el-form :model="form" class="regCenter-password" v-if="aaa">
					<el-form-item >
						<el-input v-model="form.username" autocomplete="off" class="username" placeholder="请输入注册账号" font-size="10px"></el-input>
					</el-form-item>
					<el-form-item  >
						<el-input v-model="form.password" autocomplete="off" class="password" placeholder="请输入注册密码" font-size="10px"></el-input>
					</el-form-item>
					<el-button type="primary" @click="onSubmit" class="btn">{{logType.title}}</el-button>
   	   		</el-form>
				<div class="option" v-if="isType">
					<p @click="toLog">
				     	密码登录
					</p>
					<p @click="toReg">注册账号</p>
					<a href="https://support.qq.com/products/14800">意见反馈</a>
				 </div>
				<div class="option" v-if="isReg">
					<a href="https://accounts.qq.com/find/password">找回密码</a>
					<p @click="toReg">注册账号</p>
					<a href="https://support.qq.com/products/14800">意见反馈</a>
				 </div>
				</div>
				<div class="option" v-if="aaa">
					<p @click="toLog">密码登录</p>
					<a href="https://support.qq.com/products/14800">意见反馈</a>
				 </div>
				 
			  </div>
			</el-dialog>
		
	</div>
</template>

<script>
	import { getNavData,useUser } from "@/api";
	import tools from "@/tools";
	export default {
    props:{
      isok:{
        type:Object,
        default: {value:false}
      }
    },
    name:"Login",
		data() {
			return {
				input: '',
				navList:[],
				form:{
					username:'',
					password:'',
				},
				isType:true,
				isReg:false,
				aaa:false,
				logType:{
				title: "注册",
				type:"register"
				},
				username:"",
				pw:"",
				change:"  ",
				remarks:"使用QQ手机版扫码登录，或点击头像授权登录。"
			}
		},
		created (){
		  getNavData().then(res=>{
		    this.navList = res.data;
		  })
			// this.change=this.$store.state.user.username;
		},
		methods:{
		  tokind(i){
		    this.$router.push({
				name:"kind",
				params:{
					id:this.navList[i].id
				}
			}).catch(err=>{});
		  },
		  into(){
			const abc=document.querySelector(".changeHover");
			if(this.change!="登录"){
				abc.style.display="block"
			}
		  },
		  out(){
			const abc=document.querySelector(".changeHover");
			abc.style.display="none"
		  },
		  toLog(){
			this.isType=false;
			this.isReg=true;
			this.aaa=false;
			this.logType.type="login";
			this.logType.title="登录";
		  },
		  toReg(){
			this.isType=false;
			this.isReg=false;
			this.aaa=true;
			this.logType.title = "注册";
      		this.logType.type = "register";
		  },
		  toinitial(){
			this.isType=true;
			this.isReg=false;
			this.aaa=false;
		  },
		onSubmit(){
			 this.pw=this.form.password;
   			 this.isok.value=false;
			console.log(this.form)
		useUser(this.logType.type,{
			username: this.form.username,
			password: this.form.password,
			repassword: this.form.password
		}).then(res=>{
		if(res.data.errorCode===-1){
			console.log(res.data.errorMsg)
			// this.$message.error(res.data.errorMsg);
		}else if(this.logType.type==="login"){
			this.loginSuccess(res.data.data);
      
		}else if(this.logType.type==="register"){
			this.registerSuccess(res.data.data);
      	}
   	   })
	   this.clearFormValue();
	 },
	   clearFormValue(){
			this.form.username="";
			this.form.password="";
  		 },
		  loginSuccess(data){
			this.isok.value=false;
			  this.$message({
				message:'登录成功'
			  });
		const d=new Date();
		d.setDate(d.getDate()+30);
		document.cookie="isLogin=ok;expires="+d;
		this.$store.commit("user/set_isLogin","false");
		this.$store.commit("user/set_username",data.username);
		this.$store.commit("user/set_password",tools.getCookie("token_pass"));

          this.change=this.$store.state.user.username;
		  console.log(this.$store.state.user.username)

          this.$emit("user",this.change)

		  },
		  registerSuccess(data){
			this.$message({
				message:'注册成功',
			  });
		  }
		}

	}
</script>

<style lang="less" scoped>
	html,body,ul,li,p,h1,h2,h3,h4,h5,h6,ol {
		margin: 0;
		padding: 0;
		// background: black;
	}
	li {
		list-style: none;
	}
	li a{
		text-decoration: none;
		color:#333;
	}
	em,i {
		font-style: normal;
	}

	b,strong {
		font-weight: normal;
	}
	img {
		display: block;
	}
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: #2c3e50;
      
		.header {
			height: 80px !important;
			// background-color: skyblue;
			background-color: #fff;
			display: flex;
			border-bottom: solid 3px #eaeaea;
			.content {
				display: flex;
				width: 1400px;
				margin: 0 auto;
				align-items: center;
				// background-color: pink;
				background-color: #fff;
				.logo {
					margin-right: 20px;

					img {
				 	width: 200px;
					}
				}
				nav{
					margin-left: auto;
					width: 80px;
					height: 80px;
						&:hover ul{
							display: block;
						}
					div{
						line-height: 80px;
						font-size: 20px;
						font-weight: 400;
						// background-color: yellow;
						text-align: center;
						position: relative;
					}
					ul{
						display: none;
						// background-color: mediumpurple;
						background-color: #fff;
						width: 160px;
						line-height: 40px;
						position: absolute;
						top: 80px;
						transform: translateX(-50px);
						li{
							padding-left: 10px;
							height: 60px;
							font-size: 18px;
							font-weight: 600;
							border-bottom: 1px solid black;
							cursor: pointer;
							&:hover{
								// background-color: hotpink;
								background-color: rgb(225, 223, 223);
							}
						}
					}
				}
				.search {
					display: flex;
					margin: 0 auto;
				}
				.userMsg {
					margin-left: auto;
					
					.into{
						line-height: 80px;
						position: relative;
						display:inline-block;
						.changeHover{
						border:1px solid #ccc;
						text-align: center;
						text-decoration: none;
						position: absolute;
						top:80px;
						right:-30px;
						display:none;
						li{
							width:100px;
							line-height:50px;
							font-size:14px;
							text-decoration: none;
							color:#000;
							&:hover{
								color:#2E77E5;
							}
						}
					}
					}
                   
					div{
						span{
							margin-right: 30px;
							cursor: pointer;
						}
					}
				}
			}
		}
		.main{
			 .content{
				 width: 1400px;
				//  background: ;
			 }
		}
		.footer{
		  height:40px;
		  line-height:40px;
		  text-align:center;
		}
		.register{
			color:#000;
			width:366px;
			margin:0 auto;
			.regCenter-quick{
				margin:0 auto;
				.remarks{
					margin-bottom:16px;
					font-size:12px;
					text-align:center;
					.link-tips{
						color:#2E77E5;
					}
					
				}
				.quickLogin{
					font-size:20px;
					margin-bottom:6px;
					text-align:center;
				}
				.el-dialog__header{
					text-align:center;
					padding-top:38px;
				}
			}
			
			a{
				text-decoration: none;
				color:#000;
				cursor: pointer;
			}
			.QQimg{
				display:flex;
				height:210px;
				text-align:center;
				box-sizing: border-box;
				padding-top:10px;
				img{
				width: 85px;
				height:85px;
				}
				.img1{
					margin-left:80px;
				}
				.img2{
					margin-left:30px;
				}
			}
		}
		  .option{
			display:flex;
			font-size:12px;
            justify-content: space-around;
			width:250px;
			text-align:center;
			margin:0 auto;
		}
	}
 	.regCenter-password{
				width:366px;
				margin:0 auto;
				text-align: center;
    .login-tips{
				margin-bottom:26px;
			.passwordLogin{
                margin-bottom:6px;
				font-size:20px;
			}
			.remarks{
				font-size:12px;
				color:#000;
				text-align:center;
				span{
						color:#2E77E5;
					}
			}
	}
	.el-form-item{
	  			  margin-bottom:10px;
	}			
	.quickLogin{
		        font-size:20px;
	}
	.username{
					width:250px;
					height:38px;
					margin-bottom:10px;
				}
	.password{
					width:250px;
					height:38px;
					margin-bottom:10px;
				}
	.btn{
					width:250px;
					height:38px;
					margin-bottom:30px;
					box-sizing: border-box;
				}
	}
	.el-dialog__title{
		font-size:20px;
	}
	.el-dialog__header{
		padding:40px 20px 0px;
	}
</style>

